<template>
<div class="hello">
  <h2>list-selector 测试页面</h2>
  <vue-list-selector ref="listPicker" title="请选择职业（控制所有标题）" :entry="jobListEntry" @listSelected="handleJobSelected">
    <input slot="inputer" placeholder="请选择职业(自定义样式需要从slot传入)" v-model="jobDes">
  </vue-list-selector>
  <!-- 用来测试触摸背景不滚动 -->
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</template>

<script>
var Vue = require('vue')
var vueListSelector = require('../../packages/list-selector/');
// Vue.use(ListSelector)
var ListSelector = vueListSelector;
export default {
  name: 'hello',
  data: function() {
    return {
      msg: '欢迎来到 Vue-components 测试页面',
      jobListEntry: {
        "children": [{
          "children": [{
            "children": [{
              "code": "1001.0",
              "des": "内勤人员",
              "val": "1.0"
            }, {
              "code": "1002.0",
              "des": "外勤人员",
              "val": "2.0"
            }],
            "des": "机关团体公司行号"
          }],
          "des": "机关"
        }],
        "des": "请选择职业类别（这里会控制入口的标题）"
      },
      jobDes: ""
    }
  },
  methods: {
    selectName: function() {
      console.log("selectName");
      this.brocast
    },
    handleJobSelected: function handleNameSelected(itemSlected, itemsSlecteHistory) {
      this.jobDes = itemSlected.des;
      // this.jobDes = itemsSlecteHistory[itemsSlecteHistory.length - 1].des;
    }
  },
  components: {
    vueListSelector,
    ListSelector
  }
}
</script>

<style scoped>
h2 {
  text-align: center;
  font-size: 1.5rem;
}

input {
  border: 1px solid #999;
  width: 80%;
  margin: auto;
  display: block;
}
</style>
